<div
  v-loading="isPageLoading"
  :class="[$store.state.appPrefix + '-p-period-group-trainee', $store.state.appPrefix + '-p-period-comon']"  
  data-table-extra="56">
  <div class="info-header">
    <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
    课时学习数据-{{styName}}
    <el-button type="text" size="small" @click="$flush">刷新</el-button>
    <div class="header-actions fr">
      <!-- <el-button class="add-btn mt12" size="small" @click="$exportRecord">导出EXCEL</el-button> -->
    </div>
  </div>
  <div class="g-table-layout">  
    <div class="g-table-top g-table-top-action__flex g-table-top-action__flex--br">
      <div class="g-table-top-action__left">
        <el-radio-group size="small" v-model="statType" @input="$search">
          <el-radio-button label="trainee">按学员</el-radio-button>
          <el-radio-button label="group">按分组</el-radio-button>
        </el-radio-group>
      </div>
      <div class="g-table-top-action__right">
        <el-search
          size="small"
          v-if="statType === 'trainee'"
          v-model="filterForm.q"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          isBasic
          @search="$search"
          @clear="() => {filterForm.q = ''; $search()}"
          placeholder="请输入姓名或账号">
        </el-search>
        <el-select
          size="small"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          v-model="filterForm.groupId"
          placeholder="所属分组"
          clearable
          @change="$search">
          <el-option
            v-for="item in groupList"
            :key="item.id"
            :label="item.groupName"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <el-table v-loading="isPageLoading" :height="tableHeight" :data="tableList">
      <el-table-column
        v-for="(col, k) in (statType === 'trainee' ? COL_INDEXS_TRAINEE : COL_INDEXS_GROUP)"
        :key="col.prop"
        :prop="col.interfaceParam"
        :label="col.label"
        show-overflow-tooltip
        :min-width="col.minWidth || 100"
        :fixed="k === 0 && 'left'">
        <template slot-scope="scope">
          <span v-if="col.prop === 'lessonFinishState'">
            <el-tag size="mini" :type="scope.row[col.prop] === '已完成' ? 'success' : 'info'">{{scope.row[col.prop] | filterBlank}}</el-tag>
          </span>
          <span v-else>{{(col.unit === '%' ? Number(scope.row[col.prop]) : scope.row[col.prop]) | filterBlank}}{{col.unit && col.unit}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="g-table-bottom g-pagination"
      background
      :hide-on-single-page="true"
      :layout="PAGE_CONFIG.simpleLayout"
      :total="totalCount"
      :page-size="pageSize"
      :current-page.sync="pageNo"
      @current-change="$handlePageChange">
    </el-pagination>
  </div>
</div>
